@import '../../variable';

.contain {
  position: relative;
  display: flex;
  flex-direction: column;
}

.top {
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.tree {
  flex: 1;
  overflow: auto;
}

.nodeInput {
  padding: 2px;
  height: 24px;
}

.outlineLine {
  line-height: 24px;
  height: 24px;
  position: relative;
}

.outlineLine .outlineButton {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, .5);
  border-radius: 50px;
}

.outlineLine {
  &:hover, &:focus {
    .outlineButton {
      display: block;
    }
  }
}

:global {
  .treeBase {
    .react-contextmenu-wrapper {
      height: 100%;
    }
    .react-contextmenu {
      display: none;

      ul {
        border: none;
      }
    }
    .react-contextmenu--visible {
      display: block;
      border: 1px solid @border-color-base;
      z-index: 99;

      .ant-menu-item {
        margin: 0;
        height: 28px;
        line-height: 28px;
      }
    }
  }
  //解决 树节点 长度过长导致样式偏移问题
  .ant-tree-list-holder-inner{
    .ant-tree-treenode {
      .ant-tree-node-content-wrapper{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
    }
  }
}
